import { UploadManhuaAvatar } from '@/apis';
import { StartBus } from '@/apis/bus';
import { getUserInfo } from '@/apis/user';
import BusNike from '@/components/Bus/Nike';
import BusZhuDi from '@/components/Bus/Zhudi';
import Compressor from 'compressorjs';
import { Cell, CellGroup, Loading, Uploader } from 'react-vant';
import { history, useMutation, useQuery } from 'umi';

export default function Page() {
  const { data } = useQuery(['get:user'], getUserInfo);
  console.log('data is --', data);

  const {
    data: avatarDatas,
    mutateAsync,
    isLoading,
  } = useMutation(UploadManhuaAvatar);

  // ##我要发车
  const { mutateAsync: mutateStartBusAsync } = useMutation(StartBus);

  return (
    <>
      <section className="min-h-screen">
        <CellGroup title="用户信息">
          <Cell title="头像昵称">
            <div className="flex items-center">
              <img
                src={data?.head_img}
                className=" w-12 h-12 rounded-full mr-2"
                alt=""
              />
              <h3>{data?.nickname}</h3>
            </div>
          </Cell>
          <Cell title="OpenId">
            <div className="flex items-center">{data?.openid}</div>
          </Cell>
          <Cell title="用户ID">{data?.id}</Cell>
          <Cell title="用户ID">{data?.id}</Cell>
        </CellGroup>

        <CellGroup title="页面调试">
          <Cell
            title="巴士路线"
            isLink
            onClick={() => history.push('/route')}
          />
          <Cell title="抽奖页" isLink onClick={() => history.push('/draw')} />
        </CellGroup>

        <CellGroup title="功能调试">
          <Cell
            title="清除缓存"
            isLink
            onClick={() => {
              localStorage.clear();
              sessionStorage.clear();
              window.location.replace('/');
            }}
          />
        </CellGroup>

        <CellGroup title="漫画上传测试">
          <div className="p-4">
            <Uploader
              onChange={async (e) => {
                const file = e?.[0]?.file;
                if (!file) return;
                new Compressor(file, {
                  quality: 0.6,
                  maxWidth: 1000,

                  // The compression process is asynchronous,
                  // which means you have to access the `result` in the `success` hook function.
                  async success(result) {
                    await mutateAsync(result);
                  },
                  error(err) {
                    console.log(err.message);
                  },
                });
              }}
            />
          </div>
        </CellGroup>

        {isLoading && (
          <div className="p-4">
            <Loading /> 处理中...
          </div>
        )}
        {avatarDatas?.img && (
          <img src={avatarDatas.img} className="  w-full h-auto block" alt="" />
        )}

        <div className="w-[700px]">
          <BusNike
            selfAvatar={data?.head_img!}
            friendAvatar={data?.head_img!}
          />
        </div>

        <div className="w-[700px]">
          <BusZhuDi
            selfAvatar={data?.head_img!}
            friendAvatar={data?.head_img!}
          />
        </div>
      </section>
    </>
  );
}
